<template>
  <div>
    <button @click="comName = 'QrCode'">二维码登录</button>
    <button @click="comName = 'UserPass'">账号密码登录</button>
    <hr />
    <!-- 不能写死内容 -->
    <!-- 动态组件 -->
    <!-- 动态组件内部实现的原理相当于也是v-if和v-else-if -->
    <keep-alive>
      <component :is="comName" />
    </keep-alive>

    <!-- include属性只能搭配compoent使用 -->
    <!-- <keep-alive include="UserPass">
      <component :is="comName" />
    </keep-alive> -->

    <!-- 除了UserPass都有缓存 -->
    <!-- <keep-alive exclude="UserPass">
      <component :is="comName" />
    </keep-alive> -->

    <!-- <qr-code v-if="comName === 'QrCode'"/>
    <user-pass v-else-if="comName == 'user-pass'"/>
    <user-pass v-else/>
    <user-pass v-else/> -->
  </div>
</template>

<script>
import QrCode from './components/QrCode.vue'
import UserPass from './components/UserPass.vue'
export default {
  components: {
    QrCode,
    UserPass
  },
  data () {
    return {
      comName: 'QrCode'
    }
  }
}
</script>

<style></style>
